<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>mp4</title>
        <script src="jquery-3.4.1.js" type="text/javascript"></script>
        <style>
            video{
                padding-left: 20%;
                width:60%;
            }
        </style>
    </head>
    <body>
        <div>
            <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video>
            <video id="devVideo1" muted="muted">浏览器不支持 video1 标签</video>
        </div>
        <script>
            $(function (){
                window.setInterval(videoAjax,500)
            })
            let domVideo0=document.getElementById("devVideo0");
            let domVideo1=document.getElementById("devVideo1");
            let video0=$("#devVideo0");
            let video1=$("#devVideo1");
            //存储播放视频的src
            let arry=new Array();
            //标记是否已有src
            let src0=false;
            let src1=false;
            video1.css("display","none");//隐藏1号video标签
            function videoAjax(){
                $.ajax({
                    url: "v",
                    dataType: "json",
                    method: "post",
                    success: function (resp) {
                        arry.push(resp);
                        if (!src0){
                            src0=true;
                            //添加0号video标签准备播放
                            video0.attr("src",arry.shift());
                            domVideo0.play();
                            domVideo1.pause();
                        }else if (!src1){
                            //预加载1号标签，不播放
                            src1=true;
                            video1.attr("src",arry.shift());
                        }
                    },
                })
            }

            //监听0号video
            video0.bind("ended",function(){
                video0.attr("autoplay","none")
                //隐藏1显示0
                video0.css("display","none");
                video1.css("display","");
                //更换标签才能继续播放
                video0.attr("src",arry.shift());
                domVideo1.play();
                domVideo0.pause();
            })

            //监听1号video
            video1.bind("ended",function(){
                //隐藏0显示1
                video1.css("display","none");
                video0.css("display","");
                //使1号标签预加载不播放
                video1.attr("src",arry.shift());
                domVideo0.play();
                domVideo1.pause();
            })
        </script>
    </body>
</html>